<?xml version="1.0" encoding="UTF-8"?>
<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<ui:composition template="/pages/templates/layout_principal.xhtml">
		<ui:define name="body" width="100%">
			<h:form>
				<h:panelGrid styleClass="titulo">
					<h:outputText styleClass="titulo" value="#{menuControl.nomeProjetoSelecionado} - Recursos Humanos" />
				</h:panelGrid>
				
				<br />
				
				<a4j:commandLink action="#{manterRecursosProjetoControl.listarRecursosNaoVinculados}" execute="@this"
					render="panelRecursos" oncomplete="#{rich:component('panelRecursos')}.show()">
					<h:graphicImage library="images" name="add.png" />
					Adicionar Recurso Humano
				</a4j:commandLink>
				
				<br />
				<br />
				
				<rich:dataTable id="listaRecursos"  
					var="recurso"
					value="#{manterRecursosProjetoControl.recursosDoProjeto}"
					rowClasses="odd-row, even-row" 
					styleClass="stable">
					
					<f:facet name="header">
						<rich:columnGroup>
							<rich:column>Nome</rich:column>
							<rich:column>Cargo</rich:column>
							<rich:column colspan="2">Operações</rich:column>
						</rich:columnGroup>
					</f:facet>
					
					<rich:column>
						#{recurso.nomeRecurso}
					</rich:column>
					<rich:column style="width: 10%">
						#{recurso.cargo}
					</rich:column>
					<rich:column style="width: 3%; text-align: center;">
						
						<h:commandLink action="#{manterRecursosProjetoControl.removerRecurso}" onclick="return confirm('Tem certeza que deseja remover #{recurso.nomeRecurso} do projeto?')">
							<f:setPropertyActionListener target="#{manterRecursosProjetoControl.idRecursoSelecionado}" value="#{recurso.idRecurso}"/>
							<h:graphicImage library="images" name="delete.png" title="Editar Requisito" />
						</h:commandLink>
					</rich:column>
				</rich:dataTable>
				
				<rich:popupPanel id="panelRecursos" modal="true" resizeable="false" autosized="true" 
					header="Adicionar Recurso Humano" domElementAttachment="form">
					
					<rich:messages globalOnly="true" showSummary="true" showDetail="true">
					</rich:messages>
					
					<rich:dataTable  var="recurso" 
						value="#{manterRecursosProjetoControl.recursosNaoVinculados}"
						rowClasses="odd-row, even-row" 
						styleClass="stable">
						
						<f:facet name="header">
							<rich:columnGroup>
								<rich:column>Nome</rich:column>
								<rich:column></rich:column>
							</rich:columnGroup>
						</f:facet>
						
						<rich:column>#{recurso.nomeRecurso}</rich:column>
						
						<rich:column>
							<a4j:commandLink action="#{manterRecursosProjetoControl.adicionarRecurso}" execute="@this" 
								render="listaRecursos" oncomplete="#{rich:component('panelRecursos')}.hide();">
								<h:graphicImage library="images" name="add.png" title="Adicionar Recurso" />
								<a4j:param assignTo="#{manterRecursosProjetoControl.idRecursoSelecionado}" value="#{recurso.idRecurso}" />
							</a4j:commandLink>
						</rich:column>
					</rich:dataTable>
					
					<h:panelGrid styleClass="botoes">
						<h:button value="Fechar" onclick="#{rich:component('panelRecursos')}.hide(); return false;" />
					</h:panelGrid>
				</rich:popupPanel>
				
			</h:form>
			
			<rich:jQuery  selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
			<rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />
		</ui:define>
		<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
		<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />

	</ui:composition>

</ui:component>